<template>
  <div class="eye-frame">
    <div ref="eyeRoll"
         class="eye-roll"></div>
  </div>
</template>

<script lang="ts"
        setup>
import {IpcRendererEvent, Point} from 'electron'
import {onMounted, ref} from 'vue'

// 大圆半径（不包括边框）
let bigR: number = 70
// 小圆半径
let minR: number = 10
// 大圆中心
let bigCenter: { x: number, y: number }
// 小圆中心
let minCenter: { x: number, y: number }
let eyeRoll = ref<HTMLDivElement>()

onMounted(() => {
  let domRect = eyeRoll.value?.getBoundingClientRect()
  if (!domRect) return
  // 大圆中心相对位置
  bigCenter = {x: domRect.x + minR, y: domRect.y + minR}
  // 鼠标移动侦听事件
  window.ipcRenderer.on('mouse-move', (event: IpcRendererEvent, point: Point) => {
    judge(point)
  })
})

function judge(point: Point) {
  if (!eyeRoll.value) return

  // 大圆中心绝对位置
  let absPoint = {x: window.screenLeft + bigCenter.x, y: window.screenTop + bigCenter.y}
  // 半径差值
  let diffR: number = bigR - minR

  let x: number = absPoint.x - point.x
  let y: number = absPoint.y - point.y
  // 相对距离
  let distance: number = Math.sqrt(x * x + y * y)

  if (distance > diffR) { // 距离大于半径，计算眼球位置
    // 距离比值
    let rateR = diffR / distance
    x *= rateR
    y *= rateR
  }

  eyeRoll.value.style.transform = `translate(${-x}px, ${-y}px)`
}

</script>

<style lang="scss"
       scoped>
.eye-frame {
  border: 10px solid gray;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  .eye-roll {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    position: relative;
  }
}
</style>